<template>
  <div class="banlist-page">
    <div class="container">
      <h1 class="page-title">封禁名单</h1>
      
      <el-card>
        <template #header>
          <div class="card-header">
            <span>服务器封禁记录</span>
            <el-button type="primary" @click="refreshData">
              <el-icon style="margin-right: 5px;">
                <Refresh />
              </el-icon>
              刷新数据
            </el-button>
          </div>
        </template>
        
        <el-table :data="banList" style="width: 100%" v-loading="loading">
          <el-table-column prop="playerName" label="玩家名称" width="150" />
          <el-table-column prop="uuid" label="UUID" width="280" />
          <el-table-column prop="reason" label="封禁原因" />
          <el-table-column prop="banDate" label="封禁日期" width="120" />
          <el-table-column prop="unbanDate" label="解封日期" width="120">
            <template #default="scope">
              <el-tag 
                :type="scope.row.unbanDate === '永久封禁' ? 'danger' : 'warning'"
              >
                {{ scope.row.unbanDate }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="table-footer">
          <p class="notice">
            <el-icon color="#f56c6c" style="margin-right: 5px;">
              <Warning />
            </el-icon>
            请注意：封禁记录仅用于维护服务器秩序，请遵守游戏规则
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Warning } from '@element-plus/icons-vue'
import { getBanListData } from '../api/serverApi'

export default {
  name: 'BanListPage',
  components: {
    Refresh,
    Warning
  },
  setup() {
    const banList = ref([])
    const loading = ref(false)

    const loadData = async () => {
      loading.value = true
      try {
        banList.value = getBanListData()
      } catch (error) {
        console.error('加载封禁名单失败:', error)
        ElMessage.error('加载数据失败')
      } finally {
        loading.value = false
      }
    }

    const refreshData = () => {
      loadData()
      ElMessage.success('数据已刷新')
    }

    onMounted(() => {
      loadData()
    })

    return {
      banList,
      loading,
      refreshData
    }
  }
}
</script>

<style scoped>
.banlist-page {
  padding: 20px 0;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #4CAF50;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.notice {
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .card-header {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 